import React, { useState, useEffect } from 'react'
import { NavBar, Dropdown } from 'antd-mobile'
import './daiban.css'
import axios from 'axios'
import img1 from './imgs/项目5.png'
import { useNavigate } from 'react-router-dom';


const Daiban = () => {
    const [QJlist, setQJlist] = useState([])
    const [Chulist, setChulist] = useState([])
    const [WQlist, setWQlist] = useState([])

    const user = localStorage.getItem('user')

    const userarr = Array.from(user)
    const username = userarr.splice(47, 2).join("")

    const navigate = useNavigate();

    const [status, setStatus] = useState("3")
    const [status1, setStatus1] = useState("4")

    const getQJlist = () => {
        axios.post('http://localhost:3111/qingjia/QJlist', {
            username: username,
            status: status,
            status1: status1
        })
            .then(res => {
                setQJlist(res.data.data)
                console.log(res.data.data)
            })
    }
    const getChulist = () => {
        axios.post('http://localhost:3111/chuchai/Chulist', {
            username: username,
            status: status,
            status1: status1
        })
            .then(res => {
                setChulist(res.data.data)
                console.log(res.data.data)
            })
    }
    

     const getWQlist = () => {
        axios.post('http://localhost:3111/waiqin/WQlist', {
            username: username,
            status: status,
            status1: status1
        })
            .then(res => {
                setWQlist(res.data.data)
                console.log(res.data.data)
            })
    }

    useEffect(() => {
        getQJlist()
        getChulist()
        getWQlist()
    }, [])

    const handleClk = (item) => {
        localStorage.setItem("data", item);
        navigate(`/yiban/change3/:${item}`);
    }
    const handleClko = (item) => {
        localStorage.setItem("datao", item);
        navigate(`/yiban/change4/:${item}`);
    }
    const handleClkt = (item) => {
        localStorage.setItem("waiqin", item);
        navigate(`/yiban/change6/:${item}`);
    }
    const back = () => {
        navigate("/zhu")
    }

    return (
        <div>

            {/* <NavBar>
                已办
            </NavBar> */}
            <NavBar onBack={back}>已办</NavBar>
            <div>
                <Dropdown>
                    <Dropdown.Item key='sorter' title='类型'>
                        <div className="type-div">请假</div>
                        <div className="type-div">出差</div>
                        <div className="type-div">外勤报告</div>
                        <div className="type-div">异常信息</div>
                    </Dropdown.Item>
                    <Dropdown.Item key='bizop' title='申请人'>
                        <div className="type-div">工程部</div>
                        <div className="type-div">2407A</div>
                        <div className="type-div">财务部</div>
                    </Dropdown.Item>
                </Dropdown>
            </div>
            <div className="list-div">
                {
                    QJlist.map((item) => {
                        return (
                            <div key={item._id} onClick={() => handleClk(item._id)}>
                                <div className="list-box">
                                    <img src={img1} className='list-img'></img>
                                    <div>
                                        <h3>{item.title}</h3>
                                        <p className="list-text">请假类型：{item.QJtype}</p>
                                        <p className="list-text">请假原因：{item.yuanyin}</p>
                                        <p className="list-text">请假时间：{item.KStime}至{item.JStime}</p>
                                    </div>
                                    <div>
                                        <p className="list-text">{item.KStime}</p>
                                        <button className="list-but" style={{ color: item.zhuangtai == status ? "#7BE495" : "#FF5353", border: item.zhuangtai == status ? '1px solid #7BE495' : '1px solid #FF5353' }}>{item.zhuangtai == status ? "已通过" : (item.zhuangtai == status1 ? "已拒绝" : "")}</button>
                                    </div>

                                </div>
                                <div className="list-box1"></div>
                            </div>
                        )
                    })
                }
            </div>
            <div className="list-div">
                {
                    Chulist.map((item) => {
                        return (
                            <div key={item._id} onClick={() => handleClko(item._id)}>
                                <div className="list-box">
                                    <img src={img1} className='list-img'></img>
                                    <div>
                                        <h3>{item.title}</h3>
                                        <p className="list-text">出差原因：{item.yuanyin}</p>
                                        <p className="list-text">出差地点：{item.didian}</p>
                                        <p className="list-text">出差时间：{item.CFtime}至{item.FHtime}</p>
                                    </div>
                                    <div>
                                        <p className="list-text">{item.CFtime}</p>
                                        <button className="list-but" style={{ color: item.zhuangtai == status ? "#7BE495" : "#FF5353", border: item.zhuangtai == status ? '1px solid #7BE495' : '1px solid #FF5353' }}>{item.zhuangtai == status ? "已通过" : (item.zhuangtai == status1 ? "已拒绝" : "")}</button>
                                    </div>

                                </div>
                                <div className="list-box1"></div>
                            </div>
                        )
                    })
                }
            </div>
            <div className="list-div">
                {
                    WQlist.map((item) => {
                        return (
                            <div key={item._id} onClick={() => handleClkt(item._id)}>
                                <div className="list-box">
                                    < img src={img1} className='list-img'></img>
                                    <div>
                                        <h3>{item.title}</h3>
                                        <p className="list-text">外勤类型：{item.QJtype}</p >
                                        <p className="list-text">外勤方式：{item.QJfangshin}</p >
                                        <p className="list-text">外勤时间：{item.KStime}至{item.JStime}</p >
                                    </div>
                                    <div>
                                        <p className="list-text">{item.KStime}</p >
                                        <button className="list-but" style={{ color: item.zhuangtai == status ? "#7BE495" : "#FF5353", border: item.zhuangtai == status ? '1px solid #7BE495' : '1px solid #FF5353' }}>{item.zhuangtai == status ? "已通过" : (item.zhuangtai == status1 ? "已拒绝" : "")}</button>
                                    </div>

                                </div>
                                <div className="list-box1"></div>
                            </div>
                        )
                    })
                }
            </div>
            <div className="list-div">
                {
                    WQlist.map((item) => {
                        return (
                            <div key={item._id} onClick={()=>handleClk(item)}>
                                <div className="list-box">
                                    <img src={img1} className='list-img'></img>
                                    <div>
                                        <h3>{item.title}</h3>
                                        <p className="list-text">外勤类型：{item.QJtype}</p>
                                        <p className="list-text">外勤方式：{item.QJfangshin}</p>
                                        <p className="list-text">外勤时间：{item.KStime}至{item.JStime}</p>
                                    </div>
                                    <div>
                                        <p className="list-text">{item.KStime}</p>
                                        <button className="list-but" style={{ color: item.zhuangtai == status1 ? "#7BE495" : "#FF5353", border: item.zhuangtai == status1 ? '1px solid #7BE495' : '1px solid #FF5353' }}>{item.zhuangtai == status1 ? "已通过" : (item.zhuangtai == status ? "已拒绝" : "")}</button>
                                    </div>

                                </div>
                                <div className="list-box1"></div>
                            </div>
                        )
                    })
                }
            </div>
            
        </div>
    )
}

export default Daiban
